Search Interactions#

The Scripting app supports advanced search interactions similar to SwiftUI. You can add a search bar, control its visibility and placement, react to changes in input, and display dynamic suggestions.

searchable#

Marks a view as searchable by displaying a search field and binding it to a state value.

Type#

1searchable?: {
2  value: string
3  onChanged: (value: string) => void
4  placement?: SearchFieldPlacement
5  prompt?: string
6  presented?: {
7    value: boolean
8    onChanged: (value: boolean) => void
9  }
10}

Description#

• Displays a search field in the view (typically above a <List>).
• The value is the current search query, which you control via state.
• The onChanged callback updates the state when the user types.
• Optionally provide a prompt as placeholder text.
• Use placement to customize where the search field appears.
• Use presented to programmatically show or dismiss the search field.

Example#

1function SearchExample() {
2  const [query, setQuery] = useState("")
3  const [showSearch, setShowSearch] = useState(false)
4
5  return (
6    <List
7      searchable={{
8        value: query,
9        onChanged: setQuery,
10        placement: "navigationBarDrawer",
11        prompt: "Search items",
12        presented: {
13          value: showSearch,
14          onChanged: setShowSearch,
15        }
16      }}
17    >
18      <Text>Searching: {query}</Text>
19    </List>
20  )
21}

SearchFieldPlacement options#

searchSuggestions#

Displays a list of suggestions below the search field as the user types.

Type#

1searchSuggestions?: VirtualNode

Description#

Use this to return a list of suggestions, typically based on the user's input.

Example#

1<List
2  searchable={{
3    value: query,
4    onChanged: setQuery
5  }}
6  searchSuggestions={
7    <>
8      <Text searchCompletion="Apple">🍎 Apple</Text>
9      <Text searchCompletion="Banana">🍌 Banana</Text>
10    </>
11  }
12/>

searchSuggestionsVisibility#

Controls when and where search suggestions are shown.

Type#

1searchSuggestionsVisibility?: {
2  visibility: 'visible' | 'hidden'
3  placements: SearchSuggestionsPlacementSet
4}

SearchSuggestionsPlacementSet options#

Example#

1<List
2  searchSuggestionsVisibility={{
3    visibility: 'visible',
4    placements: 'menu'
5  }}
6/>

searchCompletion#

Associates a tappable search suggestion with a complete search query string.

Type#

1searchCompletion?: string

Description#

Apply this modifier to suggestion views (such as <Text>) to indicate what value should be filled into the search field when the user taps the suggestion.

Example#

1<Text searchCompletion="Mango">🥭 Mango</Text>

When tapped, this will set the search field to "Mango".

Summary#

These modifiers work together to create a responsive, interactive search experience in any scrollable view like <List>.